<template>
  <div>
    <el-row>
      <el-col>
        <div>
          <div class="leftbox">
            <el-button type="success" @click="addNew">添加新品类</el-button>        
            <el-radio-group v-model="radio" @input="conditionSearch">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="启用"></el-radio-button>
              <el-radio-button label="禁用"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="rightbox">
            <el-input v-model="keyword" placeholder="请输入关键字查询" style="width: 180px;"></el-input>
            <el-button type="primary" @click="keywordSearch">查询</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <template>
          <el-table
            :data="categoryList"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="type" label="品类"> </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1" style="color: green;">启用中</span>
                <span v-else-if="scope.row.state == 2" style="color: red;">禁用中</span>
              </template>
            </el-table-column>         
            <el-table-column prop="addTime" label="添加时间" :formatter="formatData"> </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="detail(scope)" type="success">详情</el-button>
                <el-button type="danger" @click="change(scope)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
        <el-col :span="8" :offset="9">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <el-drawer
      title="编辑信息"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="baseCategory">
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="baseCategory.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否禁用" :label-width="formLabelWidth">
            <el-button v-if="baseCategory.state == 1" type="danger" @click="notUseIt">禁用</el-button>
            <el-button v-else type="success" @click="useIt">启用</el-button>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="handleChange"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
    <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
      <el-form :model="baseCategory">
        <el-form-item label="品类名" :label-width="formLabelWidth">
          <el-input v-model="baseCategory.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="baseCategory.state" placeholder="请选择初始状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="baseCategory.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAdd">取 消</el-button>
        <el-button type="primary" @click="sureAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改记录" :visible.sync="dialogTableVisible">
      <el-table :data="details">
        <el-table-column property="type" label="品类"></el-table-column>
        <el-table-column property="description" label="描述"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">启用</span>
            <span v-else-if="scope.row.state == 2">禁用</span>
          </template>
        </el-table-column>
        <el-table-column property="updateTime" label="修改时间" :formatter="formatData"></el-table-column>
        <el-table-column property="updatePerson" label="修改人"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
      baseCategory: {},
      details: [],
      dialog: false,
      formLabelWidth: '80px',
      current: 1,
      size: 10,
      total: 0,
      dialogFormVisible: false,
      dialogTableVisible: false,
      radio: "全部",
      keyword: '',
    };
  },
  mounted: function () {
    this.getList();
  },
  methods: {
    getList: function () {
      this.baseCategory = {};
      this.$axios.get("/baseCategory/all/" + this.current + "/" + this.size).then((res) => {
        this.categoryList = res.data.data.records;
        this.total = res.data.data.total
        console.log(this.categoryList)
      });
    },
    detail: function (scope) {
      this.$axios.get("/baseCategory/detail?categoryId=" + scope.row.id).then(res =>{
        this.details = res.data.data;
        this.dialogTableVisible = true;
      })
    },
    change: function (scope) {
        this.baseCategory = {};
        this.baseCategory = scope.row;
        this.dialog = true;
    },
    handleChange: function (scope) {
        this.$axios.put("/baseCategory/change", this.baseCategory).then(result =>{
          this.getList()
          this.baseCategory = {}
          this.dialog = false;
        })
    },
    indexMethod(index) {
      return index + 1;
    },
    cancelForm() {
      this.baseCategory = {}
      this.getList()
      this.dialog = false;
    },
    formatData(row, column, cellValue, index){
        var s =	new Date(cellValue).toLocaleString();
	    return s;
    },
    handleSizeChange(val) {
            this.size = val
            this.getList()
    },
    handleCurrentChange(val) {
        this.current = val
        this.getList()
    },
    useIt(){
      this.baseCategory.state = 1
    },
    notUseIt(){
      this.baseCategory.state = 2
    },
    addNew(){
      this.dialogFormVisible = true;
    },
    cancleAdd(){
      this.baseCategory = {}
      this.dialogFormVisible = false;
    },
    sureAdd(){
      this.$axios.post("/baseCategory/add",this.baseCategory).then(result => {
        this.getList()
        this.baseCategory = {}
        this.dialogFormVisible = false;
      })
    },
    conditionSearch(){
      this.keyword = ''
      if(this.radio == "启用"){
        this.baseCategory = {}
        this.baseCategory.state = 1
        this.current = 1
        this.size = 10
        this.$axios.post("/baseCategory/conditionalSearch/" + this.current + "/" + this.size,this.baseCategory).then(res => {
          this.categoryList = res.data.data.records
          this.baseCategory = {};
        })
      }else if(this.radio == "禁用"){
        this.baseCategory = {}
        this.baseCategory.state = 2
        this.current = 1
        this.size = 10
        this.$axios.post("/baseCategory/conditionalSearch/" + this.current + "/" + this.size,this.baseCategory).then(res => {
          this.categoryList = res.data.data.records
          this.baseCategory = {};
        })
      }else {
        this.getList()
      }
    },
    keywordSearch(){
      this.radio = '全部'
      this.current = 1
      this.size = 10
      this.$axios.get("/baseCategory/keywordSearch/" + this.current + "/" + this.size + "?keyword=" + this.keyword).then(res => {
        this.categoryList = res.data.data.records
      }) 
    }
  },
};
</script>

<style scoped>
.leftbox {
  float: left;
}
.rightbox {
  float: right;
}
</style>